<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>精灵图</title>
        <style>
        .a{
            /*锁定所取图片大小*/
            width: 40px;
            height: 40px;
            /*!*锁定所取图片链接*!*/
            /*background-image: url("b.png");*/
            /*!*限制图片不平铺*!*/
            /*background-repeat: no-repeat;*/
            /*!*注释所取图片所在文件位置  距左0  距上-240px*!*/
            /*background-position: 0 -240px;*/

            /*缩写*/
            background: url("b.png") no-repeat 0 -240px;
        }
            .b{
                width: 20px;
                height: 20px;
                background: url("b.png") no-repeat -98px -290px;
            }
            .c{
                width: 500px;
                height: 70px;
                background: skyblue;
                margin: 0 auto;
                position: relative;
            }
            .c>span{



                width: 50px;
                height: 50px;
                background-image: url("zhu.png");
                background-repeat: no-repeat;
                background-position: 0 0;
                position: absolute;
            }
        </style>
    </head>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c">
        <span></span>
    </div>
    </body>
</html>